// 分布概览
// import Excels from '../components/Mains/Excels.vue' // 没有权限
<template>
  <div>
    <div class="shousuoBox">
      <el-select
        v-model="ZCMC_IP_XH"
        @focus="selectFocus"
        @blur="selectBlur"
        clearable
        filterable
        remote
        reserve-keyword
        placeholder="输入设备名称/设备IP"
        :remote-method="remoteMethod"
        :loading="loading"
      >
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" @click.native="selectChange(item)"></el-option>
      </el-select>
    </div>
    <div id="container" :style="{ height: transferHeight + 'px' }"></div>
    <!-- <el-dialog title="测试" :visible.sync="dialogTableVisible" @close="lajis">
      <video width="100%" height="600" controls id="videoss">
        <source src="https://v1.cecdn.yun300.cn/100001_1911295043/%E4%B8%AD%E6%96%87%E5%85%AC%E5%8F%B8%E4%BB%8B%E7%BB%8D%E8%A7%86%E9%A2%91.mp4" type="video/mp4" />
        <source src="movie.ogg" type="video/ogg" />
        您的浏览器不支持 HTML5 video 标签。
      </video>
    </el-dialog> -->
  </div>
</template>
<script>
import { ziC } from '@/utils/allUrl'
// import { endLoading } from '@/utils/loading.js'
const AMap = window.AMap
export default {
  data() {
    return {
      options: [],
      restaurants: [], // 搜索数组
      loading: false,
      states: [], // 展示搜索结果数组
      state: '',
      timeout: null,
      // dialogTableVisible: false,
      ZCMC_IP_XH: [],
      typeList: [
        { zclx: 5, iconOffset: -5, onIconOffset: -38 }, // 摄像机
        { zclx: 9, iconOffset: -71, onIconOffset: -104 }, // 智能交通
        { zclx: 53, iconOffset: -137, onIconOffset: -170 }, // 主机
      ],
      map: '',
      markerList: [], // 所有点标记
      interTime: null,
      index: 2,
    }
  },
  created() {
    // endLoading()
  },
  computed: {
    transferHeight: function () {
      // 计算屏幕滚动高度 - nav - 导航栏
      return window.innerHeight - 135
    },
  },
  mounted() {
    // 渲染地图
    var that = this
    var map = new AMap.Map('container') // 创建地图实例
    // 同时引入工具条插件，比例尺插件和鹰眼插件
    AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation'], function () {
      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      var tool = new AMap.ToolBar({
        position: 'RT',
        offset: new AMap.Pixel(28, 20), // 工具条相对于基点的偏移位置
      })
      map.addControl(tool)
      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      map.addControl(new AMap.Scale())
      // // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      // map.addControl(new AMap.OverView({ isOpen: true }))
      // // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      // map.addControl(new AMap.MapType())
      // // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      // map.addControl(
      //   new AMap.Geolocation({
      //     offset: new AMap.Pixel(0, 80), // 工具条相对于基点的偏移位置
      //   })
      // )
    })
    that.map = map
    this.initList('', 1)
    // var index = 0
  },
  methods: {
    // 获取焦点
    selectFocus() {
      this.options = []
    },
    // 失去焦点
    selectBlur() {
      // 收缩展板
    },
    // 值改变
    selectChange(item) {
      var that = this
      var lng = item.jd // 经度范围[121.138398, 121.728226]
      var lat = item.wd // 纬度范围[30.972688, 31.487611]
      this.map.setCenter([lng, lat]) // 设置地图中心点
      this.map.setZoom(20) // 放大到街道
      const currentDeviceMarker = this.markerList.find((t) => t.G.extData.id === item.value)
      currentDeviceMarker.setzIndex(300) // 设置点标记叠加顺序
      // currentDeviceMarker.setAnimation('AMAP_ANIMATION_BOUNCE') // marker 弹跳动画
      var infowindow = this.getInfoContent(item.data)
      infowindow.open(this.map, [item.jd, item.wd])
      // 鼠标点击marker弹出自定义的信息窗体
      AMap.event.addListener(currentDeviceMarker, 'click', function (e) {
        // 关闭信息窗体事件
        infowindow.on('close', () => {
          that.closeInfo(e)
        })
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.restaurants.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    },
    // 资产名称和ip查询
    async initList(ZCMC_IP_XH, M_) {
      const params = new URLSearchParams()
      params.append('ZCLX_XJ_LIST', JSON.stringify([5, 9, 53]))
      params.append('ZCMC_IP_XH', ZCMC_IP_XH)
      params.append('M_', M_) // 页数
      params.append('N_', 50) // 条数
      const { data: res } = await this.$http.post(`${ziC}zcgl/distributionOverview`, params)
      switch (res.code) {
        case '0000':
          // 进行下一次加载
          var index = this.index++
          this.initList('', index)
          // var list = []
          res.data.list.forEach((item) => {
            // if (Number(item.jd) !== 0 && Number(item.wd) !== 0) {
            // list.push()
            var list_item = {
              label: item.zcmc + (item.ip === '' ? '' : `(${item.ip})`),
              value: item.id,
              ip: item.ip,
              jd: item.jd,
              wd: item.wd,
              data: item,
            }
            this.states.push(item.zcmc + (item.ip === '' ? '' : `(${item.ip})`))
            this.restaurants.push(list_item)
            // }
          })
          // this.restaurants = list
          this.initAMap(res.data.list)
          break
        default:
          // this.restaurants = []
          // this.initAMap(this.restaurants)
          break
      }
    },
    // 地图初始化
    initAMap(list) {
      var that = this
      // var map = new AMap.Map('container') // 创建地图实例
      // that.map = map
      // // 同时引入工具条插件，比例尺插件和鹰眼插件
      // AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation'], function () {
      //   // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      //   var tool = new AMap.ToolBar({
      //     position: 'RT',
      //     offset: new AMap.Pixel(28, 20), // 工具条相对于基点的偏移位置
      //   })
      //   map.addControl(tool)
      //   // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      //   map.addControl(new AMap.Scale())
      //   // // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      //   // map.addControl(new AMap.OverView({ isOpen: true }))
      //   // // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      //   // map.addControl(new AMap.MapType())
      //   // // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      //   // map.addControl(
      //   //   new AMap.Geolocation({
      //   //     offset: new AMap.Pixel(0, 80), // 工具条相对于基点的偏移位置
      //   //   })
      //   // )
      // })
      // 将 icon 传入 marker 循环生成
      var markerList = []
      list.forEach((item, index) => {
        // if (Number(item.jd) !== 0 && Number(item.wd) !== 0) {
        var iconCount = ''
        if (item.flxid1 === 5 || item.flxid2 === 5 || item.flxid3 === 5) {
          // 摄像机
          iconCount = 0
        }
        if (item.flxid1 === 9 || item.flxid2 === 9 || item.flxid3 === 9) {
          // 智能交通
          iconCount = 1
        }
        if (item.flxid1 === 53 || item.flxid2 === 53 || item.flxid3 === 53) {
          // 主机
          iconCount = 2
        }
        that.getMarker(markerList, iconCount, item, that.map)
        // }
      })
      this.markerList = markerList // 存储marker点标记
      that.map.add(markerList)
    },
    // 获取点标记
    getMarker(markerList, iconCount, item, map) {
      var that = this
      var icon = -(28 * iconCount + 5 * iconCount)
      var marker = new AMap.Marker({
        icon: that.initIcon(icon),
        position: new AMap.LngLat(item.jd, item.wd), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: item.zcmc, // 鼠标划过提示文字
        extData: { id: item.id },
        cursor: 'pointer',
      })
      that.getInfo(map, marker, item) // 信息面板
      markerList.push(marker)
      return markerList
    },
    // 获取信息窗体内容
    getInfoContent(item) {
      // 摄像头0-在线 1-不在线   主机 1都在线  2都不在线 3lan在线  4Iot在线
      var html = ''
      if (item.zclx === 53) {
        html = `<svg class="iconfont" aria-hidden="true">
                <use xlink:href="#el-icon-myLAN_${Number(item.zxzt) === 1 || Number(item.zxzt) === 3 ? 'network' : 'Nonetwork'}" />
              </svg>
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#el-icon-myIoT_${Number(item.zxzt) === 1 || Number(item.zxzt) === 4 ? 'network' : 'Nonetwork'}" />
              </svg>`
      } else {
        html = `<svg class="iconfont" aria-hidden="true">
                <use xlink:href="#el-icon-myLAN_${Number(item.zxzt) === 0 ? 'network' : 'Nonetwork'}" />
              </svg>`
      }
      var content = `
        <div><span>资产名称：</span>${item.zcmc}</div>
        <div><span>资产类型：</span>${item.zclxmc1 ? item.zclxmc1 + ' / ' : ''}${item.zclxmc2 ? item.zclxmc2 + ' / ' : ''}${item.zclxmc}</div>
        <div><span>IP：</span>${html}${item.ip}</div>
        <div><span>品牌：</span>${item.ppmc}</div>
        <div><span>型号：</span>${item.xh}</div>
        <div><span>安装地址：</span>${item.sfmc + item.csmc + item.qxmc + item.xzjdmc + item.xxdz}</div>
        <div><span>经纬度：</span>${item.jd},${item.wd}</div>`
      var infowindow = new AMap.InfoWindow({
        content: content, // 信息窗体的内容
        offset: new AMap.Pixel(-12, -5),
      })
      return infowindow
    },
    // 获取信息面板
    getInfo(map, marker, item) {
      var that = this
      var infowindow = that.getInfoContent(item)
      // 鼠标点击marker弹出自定义的信息窗体
      AMap.event.addListener(marker, 'click', function (e) {
        marker.setzIndex(300) // 设置点标记叠加顺序
        // 点击之后切换图标
        // e.target.setIcon(that.initIcon(-38)) // 换成橘黄色的
        infowindow.open(map, marker.getPosition())
        // 关闭信息窗体事件
        infowindow.on('close', () => {
          that.closeInfo(e)
        })
      })
    },
    // 关闭信息窗体事件
    closeInfo(marker) {
      marker.target.setzIndex(100) // 关闭窗体重置点标记堆叠顺序
      // console.log(marker.target.getIcon('imageOffset'))
      // marker.target.setIcon(this.initIcon(-5)) // 换成蓝色的
    },
    // 获取图标
    initIcon(offsetX) {
      // console.log('offsetX:', offsetX)
      // 创建一个 Icon // 点标记显示内容，HTML要素字符串
      const icon = new AMap.Icon({
        // 图标的取图地址
        image: require('@/assets/images/coordinate.png'), // 自定义点标记覆盖物内容
        // 所用图片大小缩放两倍
        imageSize: new AMap.Size(203, 40),
        // 展示图标尺寸
        size: new AMap.Size(28, 40),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(offsetX, 0), // 每个相加33(28+5)
      })
      return icon
    },
    // 关闭信息窗体
    closeInfoWindow(map) {
      map.clearInfoWindow()
    },
    // lajis() {
    //   const myvideo = document.getElementById('videoss')
    //   myvideo.pause()
    // },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .anchorBL {
  display: none;
}
::v-deep .name {
  padding: 10px 0 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
::v-deep .bubble {
  width: 50px;
  height: 50px;
  padding: 0 5px;
  box-sizing: border-box;
  line-height: 1;
  display: inline-block;
  position: absolute;
  border-radius: 100%;
  background-color: pink;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.8);
  text-align: center;
  cursor: pointer;
}
.shousuoBox {
  align-content: center;
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  color: #000;
  font-size: 16px;
  z-index: 99;
  .el-select {
    width: 368px;
  }
  .el-button {
    margin-left: 10px;
  }
}
::v-deep div.info-top {
  background-color: #fff;
  border-bottom: none;
}
::v-deep .amap-info-content {
  border: 1px solid #e4e7ed;
  box-shadow: 0px 2px 12px 0px rgb(0 0 0 / 20%);
  padding: 20px 30px 20px 20px;
  position: relative;
  width: 460px;
  box-sizing: border-box;
  div {
    position: relative;
    // font-weight: 400;
    color: #333333;
    font-size: 12px;
    height: auto;
    line-height: 20px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
    word-break: break-all; // 允许在单词换行
    span {
      &:first-child {
        position: absolute;
        left: 0;
        display: inline-block;
        width: 60px;
        text-align: right;
        color: #7a7a7a;
      }
    }
    .iconfont {
      width: 16px;
      height: 14px;
      transform: translate(-3px, 2px);
    }
  }
}
// 弹窗关闭按钮
::v-deep .amap-info-close {
  font-size: 20px !important;
  top: 15px;
  right: 15px !important;
}
// 三角形
::v-deep .amap-info-sharp {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
  margin-top: 0px;
  margin-left: 50%;
  transform: translateX(-50%);
  background-image: none;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
}
</style>
